const path = require('path');
const webpack = require('webpack');


// 导入在内存中生成 HTML 页面的插件
// 只要是插件 一定放到 plugins 节点中去
// 作用：
// 1. 自动在内存中根据指定页面生成一个内存的页面
// 2. 自动，把打包好的bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin');


const VueLoaderPlugin = require('vue-loader/lib/plugin');


// 这个配置文件  起始就是一个js文件，通过node中的模块操作
// 向外暴露一个配置对象
module.exports = {
    // 手动指定 入口和出口
    entry: path.join(__dirname, './src/main.js'),//入口 打包的文件
    output: { //输出文件配置
        filename: 'bundle.js',//指定输出文件的名称
        path: path.join(__dirname, './dist')
    },
    devServer: {
        // 这是配置dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
        // --open --port 3000 --contentBase src --hot 
        open: true,//自动打开浏览器
        port: 3000,//设置启动时候的运行端口
        contentBase: 'src',//指定托管目录
        hot: true  // 启动热更新

    },

    // 配置插件的节点
    plugins: [
        new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象 这是启用热更新的地3步
        new htmlWebpackPlugin({
            // 创建一个 在内存中 生成 html 页面的插件

            // 制定模板页面 将来会根据指定的页面路径，去内存中生成页面
            template: path.join(__dirname, './src/index.html'),
            // 指定生成的页面的名称
            filename: 'index.html'
        }),

        // 配置vue
        new VueLoaderPlugin()
    ],

    // 这个节点 用于配置 所有第三方模块 加载器
    module: {
        // 所有第三方模块的 匹配规则
        rules: [
            // 配置处理 .css文件的第三方 loader 规则
            // 规则是有顺序的  从右到左
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            // 处理图片路径的 limit 给定值图片的大小 单位 byte name=文件名模板
            { test: /\.(jpg|png|gif|jpeg|bmp)$/, use: ['url-loader?limit=7630&name=[hash:8]-[name].[ext]'] },
            // 处理字体文件的loader对象
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: ['url-loader'] },
            // 配置bebal 来转换 ES6文件
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            // 配置 .vue 文件的处理
            { test: /\.vue$/, use: 'vue-loader'},

        ]
    }
};


// 命令行输入 webpack 
// 1. webpack 会去根目录中找 webpack.config.js 的配置文件
// 2. 解析文件中的配置对象


// 使用  webpack-dev-server 这个工具，在实现自动打包编译
// 1. 运行 npm i webpack-dev-server -D 把这个工具安装到本地开发依赖
// 2. 安装完毕后  这个工具的用法 和webpack命令的用法  完全一样
// 3、 本地安装的 webpack-dev-server 无法当做脚本命令 在终端中直接运行
// 4. webpack-dev-server这个工具 如果想要正常运行，要求本地项目 必须安装webpack
// 5. webpack-dev-server帮我们打包生成的bundle.js 并没有放到实际的物理磁盘上，
// 而是托管到电脑的内存中，所以 我们再项目根目录中，根本找不到 这个打包好的bundle.js
// 6. webpack-dev-server 把打包好的文件 以一种虚拟的形式 托管到咱们项目的根目录中，虽然我们看不到它

